<template>
	<view class="container flex f-column">
		<view v-if="isfetch">
			<view v-if="dataList.length > 0">
				<view class="font24 gray333 tip-box"
					>提示：下单后，凭下单码开箱存衣，更便捷。</view
				>
				<view
					v-for="(item, index) in dataList"
					:key="index"
					class="flex f-align f-justifyB order-box"
				>
					<view class="flex f-column">
						<view class="flex">
							<image
								src="../static/img/shouyudibiao@2x.png"
								style="width: 40rpx; height: 40rpx"
							></image>
							<text class="font28 gray333 ml10" style="width: 400rpx">{{
								item.address
							}}</text>
						</view>
						<!-- <view class="flex f-column mt10" style="padding-left: 50rpx;">
							<view class="flex f-align f-justifyB">
								<text class="font24 gray333">智能柜储存状态</text>
								<text class="font24 gray333">剩余{{getNum(item.cabinet05, item.cabinet06)}}%可用</text>
							</view>
							<cmd-progress :percent="getNum(item.cabinet05, item.cabinet06)" :showInfo="false" :stroke-width="8" stroke-color="#4082FD"></cmd-progress>
						</view> -->
					</view>
					<view
						:class="{
							'no-yue': !getNum(item.cabinet05, item.cabinet06)
						}"
						class="yue-btn font32 white f-center"
						@click="tapHandle(item)"
						>下单</view
					>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import cmdProgress from '../components/cmd-progress/cmd-progress.vue'
export default {
	data() {
		return {
			isfetch: false,
			dataList: [],
			type: 1 // 1 首页预约下单 2 结算切换
		}
	},
	components: {
		cmdProgress
	},
	onLoad(options) {
		this.type = options.type
		this.getDataList()
	},
	onShow() {
		uni.getLocation({
			type: 'gcj02',
			success: (res) => {
				const { latitude = '', longitude = '' } = Object.assign({}, res)
				getApp().globalData.latitude = latitude
				getApp().globalData.longitude = longitude
			},
			fail: (err) => {
				this.$api.msg('位置获取失败')
			}
		})
	},
	methods: {
		getNum(total, count) {
			if (parseInt(total) === 0) {
				return 0
			} else if (parseInt(count) == parseInt(total)) {
				return 100
			} else if (!parseInt(count)) {
				return 0
			} else {
				return Math.ceil((parseInt(count) / parseInt(total)) * 100)
			}
		},
		tapHandle(item) {
			if (item.cabinet05 == item.cabinet06 && item.cabinet06 == '0') return

			uni.setStorageSync('flag', '预约下单')
			if (this.type == 1) {
				getApp().globalData.gzbh = item.gzbh
				uni.switchTab({
					url: '/pages/kind'
				})
			} else {
				if (item.cabinet05 == item.cabinet06 && Number(item.cabinet06) > 0) {
					uni.showModal({
						title: '提示',
						content: '当前机柜箱门余量不足，是否继续预约?',
						showCancel: true,
						cancelText: '否',
						confirmText: '是',
						success: (res) => {
							if (res.confirm) {
								getApp().globalData.gzbh = item.gzbh
								uni.navigateBack()
							}
						}
					})
					return
				}
				getApp().globalData.gzbh = item.gzbh
				uni.navigateBack()
			}
		},
		getDataList() {
			this.$http
				.ajax({
					url: '/Cabinet/list',
					params: {
						lat: getApp().globalData.latitude,
						lng: getApp().globalData.longitude,
						operatorid: uni.getStorageSync('merchantId')
					}
				})
				.then((res) => {
					this.isfetch = true
					if (res.code == 0) {
						this.dataList = JSON.parse(
							JSON.stringify(res.data.sort((a, b) => b.cabinet06 - a.cabinet06))
						)
					} else {
						this.$api.msg(res.msg)
					}
				})
		}
	}
}
</script>

<style scoped lang="scss">
.container {
	padding: 0;

	.tip-box {
		width: 750rpx;
		height: 50rpx;
		background-color: #4082fd;
		text-align: center;
		color: #ffffff;
	}

	.order-box {
		padding: 20rpx 32rpx;
		margin-bottom: 30rpx;
		background-color: #ffffff;

		.yue-btn {
			width: 144rpx;
			height: 60rpx;
			background: #4082fd;
			border-radius: 30rpx;
		}

		.no-yue {
			background: #c0c0c0;
		}

		.box-right {
			width: 280rpx;
			height: 144rpx;
			background: #ffffff;
			border: 2rpx solid #3063d9;
			border-radius: 20rpx;
			position: relative;

			&::before {
				position: absolute;
				left: -63rpx;
				top: 71rpx;
				content: '';
				width: 60rpx;
				height: 2rpx;
				border-top: 2rpx dashed #cccccc;
			}
		}

		.point {
			width: 14rpx;
			height: 14rpx;
			background: #cccccc;
			border-radius: 50%;
			margin-left: 20rpx;
			margin-right: 60rpx;
			position: relative;

			&::before {
				position: absolute;
				left: 6rpx;
				top: 14rpx;
				content: '';
				width: 2rpx;
				height: 310rpx;
				background-color: #cccccc;
			}
		}

		.no-line::before {
			height: 0;
		}
	}
}
</style>
